/**
 * Copyright (c) 2017-present, Liu Jinyong
 * All rights reserved.
 *
 * https://github.com/huanxsd/MeiTuan 
 * @flow
 */


import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, StatusBar, Image, TouchableOpacity, ScrollView, RefreshControl } from 'react-native'

import { Heading2, Heading3, Paragraph } from '../../widget/Text'
import { screen, system } from '../../common'
import { color, DetailCell, NavigationItem, SpacingView } from '../../widget'
import MineMenuItemTextImage from './MineMenuItemTextImage'
import MineMenuItemTextNum from './MineMenuItemTextNum'
import * as api from '../../api'
import mineDate from './mineDate'
type Props = {

}

type State = {
    isRefreshing: boolean,
    userInfo: [],
    userOtherInfo: []
}

class MineScene extends PureComponent<Props, State> {

    static navigationOptions = ({ navigation }: any) => ({
        headerRight: (
            <View style={{ flexDirection: 'row' }}>
                <NavigationItem
                    icon={require('../../img/mine/icon_navigation_item_set_white.png')}
                    onPress={() => {

                    }}
                />
                <NavigationItem
                    icon={require('../../img/mine/icon_navigation_item_message_white.png')}
                    onPress={() => {

                    }}
                />
            </View>
        ),
        headerStyle: {
            backgroundColor: color.primary,
            elevation: 0,
            borderBottomWidth: 0,
        },
    })

    state: {
        isRefreshing: boolean
    }

    constructor(props: Object) {
        super(props)

        this.state = {
            isRefreshing: false,
            userInfo: [],
            userOtherInfo: []
        }
        console.log(JSON.stringify(this.state.userInfo.nickName) + "}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}")
    }
    componentDidMount = () => {
        this.onHeaderRefresh();
        this.onOtherinfoRefresh();

    };
    onHeaderRefresh = async () => {
        this.setState({ isRefreshing: true })
        try {
            let json = await api.doPost("/user/findUserById", { "userId": "af2232f19b3a416a86ac051fcfc7bcba" })

            console.log(json.data + "^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
            this.setState({
                userInfo: json.data,
                isRefreshing: false
            })

        } catch (error) {
            alert('请求失败，请重试' + error)
        }
    }
    onOtherinfoRefresh = async () => {
        this.setState({ isRefreshing: true })
        try {
            let json = await api.doPost("/user/findOtherInfo", { "userId": "af2232f19b3a416a86ac051fcfc7bcba" })

            console.log(json.data + "%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%^");
            this.setState({
                userOtherInfo: json.data,
                isRefreshing: false
            })

        } catch (error) {
            alert('请求失败，请重试' + error)
        }
    }

    renderHeader(userInfo) {

        return (
            <View style={styles.header}>
                <Image style={styles.avatar} source={{ uri: userInfo.headUrl }} />
                <View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', }}>
                        <Heading2 style={{ color: 'white' }}>{userInfo.nickName}</Heading2>
                        <Image style={{ marginLeft: 4 }} source={{ uri: userInfo.headUrl }} />
                    </View>
                    <Paragraph style={{ color: 'white', marginTop: 4 }}>会员查看更多</Paragraph>
                </View>
            </View>
        )
    }
    renderDzinfo(userOtherInfo) {

        if (userOtherInfo.agentFlag == "1") {
            let MItemZs = (
                <View style={styles.itemContainer}>
                    <MineMenuItemTextNum title='我的团队' num={userOtherInfo.teamNum} widthStyle={styles.itemZsStyle} />
                    <MineMenuItemTextNum title='我的会员' num={userOtherInfo.memberNum} widthStyle={styles.itemZsStyle} />
                    <MineMenuItemTextNum title='我的收益' num={userOtherInfo.myWait_price} widthStyle={styles.itemZsStyle} />
                </View>
            )
            return MItemZs;
        }


    }
    render() {
        let userInfo = this.state.userInfo;
        let userOtherInfo = this.state.userOtherInfo;

        return (
            <View style={{ flex: 1, backgroundColor: color.paper }}>
                <View style={{ position: 'absolute', width: screen.width, height: screen.height / 2, backgroundColor: color.primary }} />
                <ScrollView
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={() => this.onHeaderRefresh()}
                            tintColor='gray'
                        />
                    }>

                    {this.renderHeader(userInfo)}
                    <SpacingView />
                    {this.renderDzinfo(userOtherInfo)}
                    <DetailCell title='我的订单' subtitle='全部订单' style={{ height: 38 }} />

                    <View style={styles.itemContainer}>
                        <MineMenuItemTextImage title='待付款' icon={require('../../img/order/order_tab_need_pay.png')} widthStyle={styles.itemZtStyle} />
                        <MineMenuItemTextImage title='待发货' icon={require('../../img/order/order_tab_need_use.png')} widthStyle={styles.itemZtStyle} />
                        <MineMenuItemTextImage title='待收货' icon={require('../../img/order/order_tab_need_use.png')} widthStyle={styles.itemZtStyle} />
                        <MineMenuItemTextImage title='待评价' icon={require('../../img/order/order_tab_need_review.png')} widthStyle={styles.itemZtStyle} />
                        <MineMenuItemTextImage title='退款/售后' icon={require('../../img/order/order_tab_needoffer_aftersale.png')} widthStyle={styles.itemZtStyle} />

                    </View>

                    <SpacingView />

                    <DetailCell title='我的资产' image={require('../../img/mine/icon_mine_balance.png')} style={{ height: 38 }} />

                    <View style={styles.itemContainer}>
                        <MineMenuItemTextNum title='积分' num={userOtherInfo.onlineIntegral} />
                        <MineMenuItemTextNum title='优惠券' num={userOtherInfo.couponNum} />
                        <MineMenuItemTextNum title='兑换码' num={userOtherInfo.redeemNum} />
                        <MineMenuItemTextNum title='礼品卡' num={userOtherInfo.offlineIntegral} />

                    </View>

                    <SpacingView />

                    <DetailCell
                        title='申请成为店主'
                        image={require('../../img/mine/icon_mine_balance.png')}
                        style={{ height: 38 }}
                        onPress={() => this.props.navigation.navigate('ApplyForDzScene', { id: userInfo.id, phone: userInfo.phone, nickName: userInfo.nickName,openId:userInfo.openId })} />

                    <DetailCell title='分享得真金' image={require('../../img/mine/icon_mine_balance.png')} style={{ height: 38 }} />
                    <DetailCell title='店主顾问' image={require('../../img/mine/icon_mine_balance.png')} style={{ height: 38 }} />


                    <DetailCell title='客服帮助' image={require('../../img/mine/icon_mine_customerService.png')} style={{ height: 38 }} />
                    <DetailCell title='关于' image={require('../../img/mine/icon_mine_aboutmeituan.png')} style={{ height: 38 }} />

                </ScrollView>
                <SpacingView />

            </View>
        )
    }


}


const styles = StyleSheet.create({
    icon: {
        width: 27,
        height: 27,
    },
    header: {
        backgroundColor: color.primary,
        paddingBottom: 20,
        flexDirection: 'row',
        alignItems: 'center',
        margin: 10,
    },
    avatar: {
        width: 50,
        height: 50,
        marginRight: 10,
        borderRadius: 25,
        borderWidth: 2,
        borderColor: '#51D3C6'
    },
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    itemContainer: {
        flexDirection: 'row',
        backgroundColor: 'white',

    },
    itemZsStyle: {
        width: screen.width / 3,
    },
    itemZtStyle: {//普通会员
        width: screen.width / 5,
    }
})


export default MineScene
